<template>

  <!--主体-->
  <div style="display:inline" >
            <!--      中央显示-->
            <div style="margin:10px 20% 10px 10%;text-align: center;font-size: xx-large">
              登录日志
            </div>

            <el-table
                :data="tableData"
                border
                style="width: 100%;opacity: 0.8">
              <el-table-column
                  align="center"
                  prop="id"
                  label="登录者编号"
                  sortable>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="type"
                  label="登录者身份"
                  sortable>
              </el-table-column>
              <el-table-column
                  align="center"
                  prop="logintime"
                  label="登录时间"
                  sortable
              >
              </el-table-column>

            </el-table>
            <div class="block">
              <!--    分页-->
              <span class="demonstration" style="margin-left: 45%">页面跳转</span>
              <el-pagination
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20]"
                  :page-size="pageSize"
                  layout="prev, pager, next"
                  size=10
                  :total=total
                  @current-change="handleCurrentChange"
                  style="margin-left: 35%">
              </el-pagination>
            </div>
    <div style="margin-left: 93.5%;margin-bottom: 0%">
      <el-button type="primary" size="small" @click="$router.push('/login')">返回登录界面</el-button>
    </div>

  </div>


</template>

<script>
import request from "@/utils/request";
import { ref } from 'vue'
import Header from "@/components/Header";
import TopMenu from "@/components/TopMenu";

export default {
  name: "Log",
  data() {
    return {
      path: this.$route.path,
      form:{},
      currentPage:1,
      pageSize:15,
      total:0,
      tableData: [],
    }
  },

  //页面加载时自动调用
  created() {
    sessionStorage.setItem("user","forCheckLog")
    this.load()
  },

  methods: {
    //页面初始化加载时调用，搜索内容时调用
    load() {
      request.get("/log",{
        params:{
          pageNum:this.currentPage,
          pageSize:this.pageSize,
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records   //把发送到服务器，服务器存在data的records中的数据取出赋值给表格数据
        this.total = res.data.total
      })
    },

    handleCurrentChange(pageNum){
      this.currentPage = pageNum
      this.load()
    },

  }

}
</script>

<style scoped>
</style>